<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>猫眼TOP100</title>
  <link rel="stylesheet" href="style.css">
  <style type="text/css">
  h1 {color:red;}
  *{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Montserrat',sans-serif;
     }
    
   body{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
     }
   .container
   {
   position:relative;
   width:1100px;
   display:flex;
   flex-wrap:wrap;
     }
.container .box
 {
   position:relative;
   width:275px;
   height:275px;
   overflow:hidden;
   transition: 0.5s;
   }
.container .box:hover
{
  z-index:1;
  transform:scale(1.25);
  box-shadow:0.25px 40px rgba(0,0,0,.5);
  }

.container .box .imgBx 
{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
} 

.container .box .imgBx:before
{
  content:'';
  position:absolute;
  top:25px;
  left: 3px;
  width: 100%;
  height:100%;
  z-index:1;
  background:linear-gradient(180deg,#f00,#000);
  mix-blend-mode:multiply;
  opacity:0;
  transition:0.5s;
  }
.container .box:hover .imgBx:before
{
    opacity:1;
}

.container .box .imgBx img 
{
  position: absolute;
  top: 35px;
  left: 15px;
  width: 100%;
  height: 100%;
  object-fit: cover;
} 

.container .box .content
{
   position:absolute;
   top:0;
   left:0;
   width:100%;
   height:100%;
   z-index:2;
   display:flex;
   padding:20px;
   align-items:flex-end;
}
.container .box .content h2
{
 color:#fff;
 transition:0.5s;
 text-transform:uppercase;
 margin-bottom:5px;
 font-size:20px;
 transform:translateY(200px);
}
.container .box:hover .content h2
{
  transform:translateY(0);
  transition-delay:0.6s;  
}

.container .box:hover .content p
{
    color:#fff;
    transform:translateY(200px);
    transition:0.5s;
    font-size:14px;
}

.container .box:hover .content p
{
   transform:translateY(0);
   transition-delay:0.7s;
}


 
  </style>

<body>
    <div class="title">
        <h1 align="center">猫眼TOP100电影</h1>    
    <div class="container">
    {% for movie in data%}
        <div class="box">
            <div class="imgBx">
               <img src={{movie['电影图片url']}} width=300 height=300>
             </div>             
             <div class="content">
                <div>
                  <h2>{{movie['电影名字']}}</h2>
                  <p>排名：{{movie.电影排名}}</p>
                  <p>主演：{{movie['电影主演']}}</p>
                  <p>上映时间:{{movie['上映时间']}}</p>
                  <p>得分：{{movie['电影得分']}}</p>
                 </div>
           </div>
        </div>
        {%endfor%}
    </div>
    </div>
 </body>
</html>
   

